<template lang="html">
    <div class="radioList">
        <!-- 自定义组件 -->
        <RadioTitle  title="电台分类" />
        <div class="container">
          <ul>
            <router-link to="/radioclasses/hot" tag="li">热门</router-link>
            <li>夜晚</li>
            <li>最近</li>
            <li>情感</li>
            <li>晚安</li>
            <li>治愈</li>
            <li>个性</li>
            <router-link to="/radioclasses/more" tag="li">更多</router-link>
          </ul>
          <div class="radioNav">
              <!-- 自定义组件 -->
              <RadioNav />
          </div>
          <div class="show">
              <div class="title">
                  <h4>正在直播</h4>
              </div>
              <!-- 自定义组件 -->
              <Live />
          </div>
        </div>
    </div>
</template>

<script>
import RadioTitle from "../../components/radioTitle"
import RadioNav from "../../components/radioNav"
import Live from "../../components/live"
export default {
    name:"radioclasses",
    data(){
      return{

      }
    },
    components:{
      RadioTitle,
      RadioNav,
      Live

    }
}
</script>

<style scoped>
.radioList .container ul{
  clear: both;
  overflow: hidden;
  width:100%;
  height:.65rem;
  padding: .32rem .43rem .27rem;
  box-sizing: border-box;
  background-color: #fff;

}
.radioList .radioNav{
  width: 100%;
  padding: 0 0.3rem;
  background-color: #fff;
  box-sizing: border-box;
}
.radioList .container ul li{
  float: left;
  margin-right: .3rem;

}
.radioList .container ul li:last-child{
  margin-right: 0;

}
.show{
  background-color: #fff;

}
.show .title{
  width: 100%;
  height: .77rem;
  padding:.28rem 0 .19rem .15rem;
  box-sizing: border-box;
  margin-top: .3rem;
}
.show .title h4{
  font-size: 16px;
}
</style>
